<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>是男人坚持 100 次</title>
        <link rel="stylesheet" type="text/css" href="http://lab.gracecode.com/css/reset.source.css" />
        <link rel="stylesheet" type="text/css" href="dazing.source.css" />
    </head>
    <body>
       <div class="container">
           <h1 id="title">是男人坚持 100 次</h1>
           <div class="content" id="content"><ul class="dazing" id="dazing"></ul></div>
           <p id="status" class="status">您坚持了 <em id="score"></em> 次，还有 <em id="life"></em> 次犯错机会。</p>

           <div class="msg" id="msg">
               <div id="begin">
                   <h2>是男人坚持 100 次</h2>
                   <p>游戏方法：猛按 “上、下、左、右 ”方向键</p>
                   <p><button id="btn_start">开&nbsp;始</button></p>
               </div>
               <div id="end">
                   <h2>恭喜，您很靠谱得坚持了 <em id="result"></em> 次</h2>
                   <p><button id="btn_restart">不服气，再来？</button></p>
               </div>
           </div>
       </div>
       <script type="text/javascript" src="dazing.source.js"></script>
       <script type="text/javascript">
           window.onload = function() {
               var getEl = function(id) {return document.getElementById(id)};
               var setStyle = function(el, p, v) {el.style[p] = v};
               var item = ['status', 'title', 'content', 'score', 'life', 'result', 'begin', 'end', 'msg', 'btn_restart', 'btn_start'], EL = {};
               for (var i in item) { EL[item[i]] = getEl(item[i]); }
               var hidden = ['title', 'content', 'status', 'end'];
               var hiddenFunc = function() {
                   for (var i in hidden) { setStyle(EL[hidden[i]], 'visibility', 'hidden') };
               };
               var unHiddenFunc = function() {
                   for (var i in hidden) { setStyle(EL[hidden[i]], 'visibility', '') };
               };
               hiddenFunc();

               var onFinished = function() {
                   hiddenFunc();
                   setStyle(EL['msg'], 'display', '');
                   setStyle(EL['end'], 'visibility', '');
                   EL['result'].innerHTML = this.score;
               };

               var onScrolling = function() {
                   EL['life'].innerHTML  = this.config.life - this.life;
                   EL['score'].innerHTML = this.score;
               };

               var handle = new Dazing(getEl('dazing'), {group: 10, step: 2,  onFinished: onFinished, onScrolling: onScrolling, life: 3});

               EL['btn_start'].onclick = function() {
                   setStyle(EL['msg'], 'display', 'none');
                   setStyle(EL['begin'], 'display', 'none');
                   unHiddenFunc();
                   handle.start();
                   return false;
               };

               EL['btn_restart'].onclick = function() {
                   setStyle(EL['msg'], 'display', 'none');
                   unHiddenFunc();
                   handle.init();
                   handle.start();
                   return false;
               };
           };
       </script>
    </body>
</html>
